<template>
	<view :class="{ 'my-tabs': true, 'space-between': formatBe }" :style="{ background: bgc, height: height }">
		<view
			v-for="(item, index) in getModelData"
			:key="index"
			:style="{ color: color, lineHeight: lHeight, fontSize: size }"
			:class="{ 'tab-item': true, active: initIndex === index }"
			@tap="tap(index)"
		>
			<view class="badgeBigBox">
				<view class="textBox">{{ item.label }}</view>
				<view class="badgeBox" :style="{ right: rightNum(item.num) + 'px' }">
					<uni-badge :text="maxNum(item.num)" :type="initIndex === index ? 'error' : 'own'"></uni-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['modelData', 'initIndex', 'bgc', 'color', 'lHeight', 'height', 'size'],
	data() {
		return {
			defaultInfo: {
				data: [{ label: '已受理', num: 1 }, { label: '审核中', num: 0 }, { label: '已完成', num: 0 }]
			}
			// activeIndex: 0 //默认索引
		};
	},
	computed: {
		getModelData() {
			// this.initActive();
			return this.modelData || this.defaultInfo.data;
		},
		formatBe() {
			return this.modelData ? (this.modelData.length > 4 ? true : false) : false;
		},
		maxNum() {
			return function(num) {
				let nums = 0;
				if (num >= 100) {
					nums = '99+';
				} else {
					nums = num;
				}
				return nums;
			};
		},
		rightNum() {
			return function(num) {
				let right = 0;
				if (num >= 10 && num < 100) {
					right = -20;
				} else if (num >= 100) {
					right = -26;
				} else {
					right = -13;
				}
				return right;
			};
		}
	},
	watch: {
		// initIndex: {
		// 	deep: true,
		// 	handler: function(newval, oldval) {
		// 		this.activeIndex = newval;
		// 		console.log(newval);
		// 	}
		// }
		// initIndex(val) {
		// 	console.log(val);
		// 	this.activeIndex = this.initIndex;
		// }
	},
	methods: {
		tap(index) {
			if (index !== this.activeIndex) this.$emit('change', index);
			// this.activeIndex = index;
		},
		/**
		 * @name 初始化activeIndex
		 */
		initActive() {
			this.activeIndex = this.initIndex || this.activeIndex;
		}
	},
	created() {
		// this.initActive();
	}
};
</script>
<style lang="scss">
.my-tabs {
	// height: 45px;
	font-size: 28upx;
	background: #0184fe;
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
	// border-top: 2upx solid #dddddd;
	// border-bottom: 2upx solid #dddddd;
	min-width: 100%;
	overflow-x: auto;
	.tab-item {
		line-height: 48upx;
		padding: 5px;
		// min-width: 100upx;
		font-size: 14px;
		text-align: center;
		color: #b3dcff;
	}
	.tab-item.active {
		position: relative;
		color: #ffffff;
	}
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
		border-bottom: 4px solid #CD001B;
		animation: test ease 1 1s;
	}
	.badgeBigBox {
		position: relative;
		padding-bottom: 5px;
		.badgeBox {
			position: absolute;
			top: -1px;
			right: -13px;
		}
		.textBox {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; //多行在这里修改数字即可
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
}
.my-tabs.space-between {
	justify-content: space-between;
}
@keyframes test {
	0% {
		width: 50%;
	}
	50% {
		width: 100%;
	}
	100% {
		width: 50%;
	}
}
</style>
